// 设置基地址
axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net'

// 获取元素
const tb = document.querySelector('#tb')
const form = document.querySelector('#bookForm')

// 封装一个渲染函数
const renderData = async function () {
  // 发起请求
  const { data: res } = await axios.get('/api/getbooks')
  // console.log(res);
  // const { data } = res

  // map遍历数据添加模板
  const html = res.data
    .map((item) => {
      return `<tr>
     <td>${item.id}</td>
     <td>${item.bookname}</td>
     <td>${item.author}</td>
     <td>${item.publisher}</td>
     <td><a href="#" data-id="${item.id}">删除</a></td>
         </tr>`
    })
    // join('')将数据转成字符串
    .join('')

  // 渲染真实数据到页面
  tb.innerHTML = html
}

// 页面加载，调用渲染函数时渲染页面
renderData()

// 添加内容

// 给form表单添加提交事件
form.addEventListener('submit', async function (e) {
  // 阻止表单的默认提交行为
  e.preventDefault()

  // 使用serialize插件获取数据
  // 直接将数据转化成对象
  const data = serialize(form, { hash: true })

  // 发起请求
  const { data: res } = await axios.post('/api/addbook', data)
  alert(res.msg)
  // 判断业务状态码是不是成功状态
  if (!res.msg === '201') return

  // 重置input框里面的内容
  form.reset()

  // 成功添加后重新调用渲染函数渲染页面
  renderData()
})

// 删除内容
// 给tb绑定一个委托事件 点击后执行a标签
tb.addEventListener('click', async function (e) {
  // 判断有没有a标签
  if (e.target.tagName === 'A') {
    // 给a标签添加一个自定义属性，并且获取自定义属性的id
    const id = e.target.dataset.id

    // 发起删除请求
    const { dara: res } = await axios.get('/api/delbook', { garams: { id } })
    // 删除之后重新渲染页面
    renderData()
  }
})

// 搜索
// 获取搜索btn按钮元素
const search = document.querySelector('#search')
// 给搜索tbn按钮绑定点击事件
search.addEventListener('click', async function (e) {
  // 阻止表单的默认提交行为
  e.preventDefault()
  //使用使用serialize插件获取数据,直接将数据转化成多谢
  const data = serialize(form, { hash: true })

  const { data: res } = await axios.get('/api/getbooks', { params: data })

  const render = res.data
  // map遍历数据，添加模板
  const html = render
    .map((item) => {
      return `<tr>
 <td>${item.id}</td>
 <td>${item.bookname}</td>
 <td>${item.author}</td>
 <td>${item.publisher}</td>
 <td><a href="#" data-id="${item.id}">删除</a></td>
     </tr>`
    })
    // 转为字符串
    .join('')
  // 渲染真实数据到页面
  tb.innerHTML = html
})
